<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>博客页面</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

body {
	overflow-x: hidden;
}

.zth-body-container {
	width: 100%;
	height: 100%;
	position: relative;
}

/* 头部 */
.zth-body-container .zth-body-head {
	width: 100%;
	height: 500px;
	border: 1px solid rgb(71, 71, 102);
	background-color: rgb(71, 71, 102);
}

.zth-head-text {
	font-size: 30px;
	font-weight: bold;
	font-family: '楷体';
	color: snow;
	text-align: center;
	margin-top: 180px;
	height: 50px;
	line-height: 50px;
}

.zth-head-textc {
	font-size: 24px;
	margin-top: 20px;
	font-weight: bold;
	font-family: '楷体';
	color: snow;
	text-align: center;
}

.zth-head-personal {
	font-size: 22px;
	color: honeydew;
	font-family: '楷体';
	position: absolute;
	right: 20px;
	top: 20px;
}

.zth-top-menus ul {
	list-style-type: none;
	position: absolute;
	left: 180px;
	top: 20px;
}

.zth-top-menus ul li {
	float: left;
	margin-left: 15px;
}

.zth-top-menus ul li a {
	text-decoration: none;
	color: #cccccc;
	font-size: 20px;
	font-family: '楷体';
}

.zth-top-menus ul li a:hover {
	color: #141414;
}


.zth-show-hide{
	margin-top: 200px;
	margin-left: 400px;
	color: white;
}

.zth-show-hide label{
	font-size: 28px;
	font-weight:bold;
	display: inline-block;
	margin-bottom: 20px;
}

.zth-show-hide .zth-hide-text{
	
	font-family: '楷体';
}

.zth-hide-span{
	width: 500px;
}

.zth-show-hide .zth-hide-span span{
	cursor:pointer;
	padding:5px;
	margin-top:18px;
	display: inline-block;
	border: 1px solid;
	margin-left: 10px;
}








/* 主体 */
 iframe {
	width: 100%;
	padding-bottom: 30px;
	padding-top	: 30px;
} 
/* 底部 */
.zth-body-bottom {
	border: 1px solid;
	width: 100%;
	height: 100px;
	background: Gainsboro;
}
.zth-botton-config{
	font-size: 16px;
	margin-top: 10px;
	text-align: center;
	font-family: '新宋体'
}
</style>
</head>
<body>
	<!-- 容器 -->
	<div class="zth-body-container" id="app">
		<!-- 头部 -->
		<div class="zth-body-head">
			<!-- 标题 -->
			 <div v-show="headline">
			
				<div class="zth-head-text">主页</div>
				<div class="zth-head-textc">世界那么大 我想去看看</div>
				<div class="zth-head-textc">爱生活，爱旅行，爱技术。喜欢喧闹繁华，也喜欢安静的一人独处</div>
				<div class="zth-head-textc">个人博客：www.zth.com</div>
			</div> 
			<div class="zth-show-hide" v-show="information">
				<div>
					<label>{{blogs.blog_title}}</label>
				</div>
				<div class="zth-hide-text">{{data}} {{length}}条评论 {{blogs.blog_views+1}}浏览</div>
				<div class="zth-hide-span">
					<span v-for="ss in tagss">{{ss}}</span>
					
				</div>
			</div>
			<div class="zth-head-personal">personal blog</div>

			<!-- 菜单 -->
			<div class="zth-top-menus">
				<ul>
					<li><a href="blog/blog.html" target="myIframe" @click="switchs">主页</a></li>
					<li><a href="blog/link.html" target="myIframe" @click="switchs">友链</a></li>
					<li><a href="" @click="commentShow(1)" target="myIframe">关于</a></li>
					<li><a href="javascript:void(0);" target="myIframe" @click="switchs">GlTHUB</a></li>
				</ul>
			</div>
		</div>
		<!-- 主体内容 -->
		<div class="zth-bote-subject">
			  <iframe src="blog/blog.html" name="myIframe" id="iframepage" frameborder="0" scrolling="no" onload="this.height=100"></iframe> 
			<!-- <iframe src="blog/blog.html" id="iframepage" name="myIframe" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe> -->
		</div>
		
		<div class="zth-body-bottom">
			<div class="zth-botton-config">{{config[0].config_value}}{{config[1].config_value}}</div>
			<div class="zth-botton-config">{{config[2].config_value}}</div>
			<div class="zth-botton-config">声明：该网页使用权和最终解释权都为网页开发者所有</div>
		</div>
	</div>

	<script src="../../js/vue/axios.min.js"></script>
	<script src="../../js/jquery.min.js"></script>
	<script src="../../js/vue/vue.js"></script>
	<script>
		
	
	/* function iFrameHeight() {
		var ifm= document.getElementById("iframepage");
		var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
		if(ifm != null && subWeb != null) {
		ifm.height = subWeb.body.scrollHeight;
		}
		}
		window.setInterval("iFrameHeight()", 200); */
		
		function alter(unknownId){
			 var ifm= document.getElementById("iframepage");
			mv.commentShow(unknownId);
		}
		
		
		
		function ssb(){
			 var ifm= document.getElementById("iframepage");
			ifm.height='0px';
		}
	
		//myIframe自动撑开
		   function reinitIframe() {
			var iframe = document.getElementById("iframepage");
			
			try {
				var bHeight = iframe.contentWindow.document.body.scrollHeight;
				var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
				var height = Math.max(bHeight, dHeight);
				iframe.height = height;
			} catch (ex) {
			}
		}
		window.setInterval("reinitIframe()", 200);
		
		
		var mv=new Vue({
			el:'#app',
			data(){
				return{
					//储存配置数据
					config:[],
					blogs:[],//储存博客数据
					length:0,//评论条数
					headline:true,//控制标题显示隐藏
					information:false,//控制其他显示隐藏
					data:'',//储存时间
					tagss:[],//储存标签
				}
			},
			mounted:function(){
				this.configShow();
			},
			methods:{
				//获取配置
				configShow:function(){
					axios.get('/ssb/config/findAll').then(res=>{
						var o=res.data;
						this.config=o;
					},err=>{
						console.log(err);
					});
				},
				//评论
				commentShow:function(blog_id){
					axios.get('/ssb/comment/findById?id='+blog_id).then(res=>{
						this.headline=false;
						this.information=true;
						this.length=res.data.length;
						this.bolgShow(blog_id);
					},err=>{
						console.log(err);
					});
					
				},
				//博客数据
				bolgShow:function(blog_id){
					axios.get('/ssb/blog/blogById?id='+blog_id).then(res=>{
						 var ifm= document.getElementById("iframepage");
						 ifm.src="blog/regard.html?id="+blog_id;
						var o=res.data;
						this.blogs=o;
						  var end=new Date(o.create_time)
							let d = new Date(end)
							//将时间戳转化成年月日
							let batchDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
							this.data=batchDate
							//获取到标签
							var tags=o.blog_tags;
							//将标签切割成字符串
							this.tagss=tags.split(",")
							this.readNum(blog_id,res.data.blog_views);
					},err=>{
						console.log(err);
					})
				},//添加阅读量
				readNum:function(blog_id,blog_views){
					 var params=new URLSearchParams();
					params.append('blog_id',blog_id);
					params.append('blog_views',blog_views+1)
					axios.post('/ssb/blog/editViews',params).then(res=>{
						if(res.data>0){
							console.log("阅读量添加成功！");
						}else{
							console.log("阅读量添加失败！");
						}
					},err=>{
						console.log(err);
					});
				},
				//转换显示隐藏
				switchs:function(){
					this.headline=true;
					this.information=false;
				}
			}
		});
	</script>

</body>
</html>
